<template>
  <div style="margin: 20px 0; width: 1000px; background-color: #fff; font-size: 12px; display: flex; flex-direction: row;">
    <div class="left">
      <el-image
        :src="image"
        style="width: 100px; height: 100px;"
      >
        <template #error>
          <div class="image-slot">
            <el-icon><icon-picture /></el-icon>
          </div>
        </template>
      </el-image>
      <div style="margin-left: 10px; color: #333;">
        送货方式: {{ logistics }}
      </div>
    </div>
    <div class="right">
      <div style="overflow-y: auto;">
        <el-timeline style="padding: 10px;">
          <el-timeline-item
            v-for="(item, index) in orderLogisticsDetails"
            :key="index"
            :timestamp="item.createTime"
            color="#3271ae"
            size="large"
          >
            {{ item.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    image: String,
    logistics: String,
    orderLogisticsDetails: Array
  },
};
</script>

<style scoped>
.left {
  width: 325px;
  border-right: 1px solid #f1f1f1;
  color: #999;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  padding: 20px;
}
.right {
  display: flex;
  justify-content: center;
  align-self: center;
  width: 675px;
  padding: 20px;
}
</style>